import { cn } from '@/lib/util'
import style from './index.module.css'
import SmallText from '@/components/base/UI/SmallText'
/**我们的优势 */
export default function Advantage() {
    return (
        <>
            <div className="flex flex-col justify-center items-center bg-[#f8f8f8] pb-[50px] pt-[60px]">
                <div className='text-[40px] font-bold mt-[70px]'>我们的优势</div>
                <SmallText size={28}>OUR ADVANTAGES</SmallText>
                <div className="flex flex-wrap gap-[70px] mt-[30px]">
                    <div className="w-[300px] h-[400px] shadow-lg bg-white rounded-3xl bg-gradient-to-b bg-gradient-to-b-10 from-[#f8f8f8] to-white to-30%">
                        <div className={cn(style.hexagon)}>
                            <i className="iconfont icon-hebingxingzhuang text-[#fff] absolute z-[999] top-[-30px] left-[-25px]" style={{ fontSize: '97px', transform: 'rotate(-30deg)' }}></i>
                        </div>
                        <div className='flex justify-center text-[20px] font-bold'>
                        实时数据与快速更新
                        </div>
                        <div className='mt-[35px] text-[13px] text-[#646464] px-[20px]'>
                            提供短线市场关键信息，实时推送重要市场新闻和事件，帮助用户捕捉市场动态
                        </div>
                    </div>
                    <div className="w-[300px] h-[400px] shadow-lg bg-white rounded-3xl bg-gradient-to-b bg-gradient-to-b-10 from-[#f8f8f8] to-white to-30%">
                        <div className={cn(style.hexagon)}>
                            <i className="iconfont icon-gupiaoqiquan text-[#fff] absolute z-[999] top-[-30px] left-[-25px]" style={{ fontSize: '97px', transform: 'rotate(-30deg)' }}></i>
                        </div>
                        <div className='flex justify-center text-[20px] font-bold'>
                        技术分析工具
                        </div>
                        <div className='mt-[35px] text-[13px] text-[#646464] px-[20px]'>
                        集成强大的图表功能和技术指标
                        </div>
                    </div>
                    <div className="w-[300px] h-[400px] shadow-lg bg-white rounded-3xl bg-gradient-to-b bg-gradient-to-b-10 from-[#f8f8f8] to-white to-30%">
                        <div className={cn(style.hexagon)}>
                            <i className="iconfont icon-bianpingguanli text-[#fff] absolute z-[999] top-[-30px] left-[-25px]" style={{ fontSize: '97px', transform: 'rotate(-30deg)' }}></i>
                        </div>
                        <div className='flex justify-center text-[20px] font-bold'>
                            xxx
                        </div>
                        <div className='mt-[35px] text-[13px] text-[#646464] px-[20px]'>
                            xxx
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}